<template>
  <div class="bg">
    <div class="header">
      <img src="../img/head.svg">
      <div class="box">
        <img src="../img/zldq_logo.png" style="width: 100px;margin-top: 2vh;margin-left: 1vh">
        <div class="title" style="margin-top: -1vh">数智化控制中心</div>
      </div>
    </div>

    <div class="dp_con">
      <div class="left">
        <div class="card height_50">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span @click="openSCGK" >生产概况</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="sckg">
              <div class="item">
                <img src="../img/icon3.svg">
                <p class="text1">{{scgk_rc}}</p>
                <p class="text2">日产(吨)</p>
              </div>
              <div class="item">
                <img src="../img/icon3.svg">
                <p class="text1">{{scgk_yc}}</p>
                <p class="text2">月产(吨)</p>
              </div>
              <div class="item">
                <img src="../img/icon3.svg">
                <p class="text1">{{scgk_nc}}</p>
                <p class="text2">年产(吨)</p>
              </div>
              <div class="item">
                <img src="../img/icon3.svg">
                <p class="text1">{{scgk_lpl}}%</p>
                <p class="text2">月成品率</p>
              </div>
            </div>
            <div class="sckg_tb zw" ref="scgkChar"></div>
          </div>
        </div>
        <div class="card height_50">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span @click="openSBXJ">设备巡检</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="sbxj">
              <div class="item" style="color: #5B7BE4">
                <img src="../img/sbxj-icon1.svg">
                <p class="text1">运行（{{sb_run}}/{{sb_total}}）</p>
                <p class="text2">{{sb_run_p}}<small>%</small></p>
              </div>
              <div class="item" style="color: #FFB71E">
                <img src="../img/sbxj-icon2.svg">
                <p class="text1">告警（{{sb_alarm}}/{{sb_total}}）</p>
                <p class="text2">{{sb_alarm_p}}<small>%</small></p>
              </div>
              <div class="item" style="color: #FF1F1F">
                <img src="../img/sbxj-icon3.svg">
                <p class="text1">故障（{{sb_falut}}/{{sb_total}}）</p>
                <p class="text2">{{sb_falut_p}}<small>%</small></p>
              </div>
              <div class="item" style="color: #1BFFF0">
                <img src="../img/sbxj-icon4.svg">
                <p class="text1">平均故障间隔</p>
                <p class="text2">{{sb_mtbf}}<small>天</small></p>
              </div>
              <div class="item" style="color: #C1C7C7">
                <img src="../img/sbxj-icon5.svg">
                <p class="text1">平均修复间隔</p>
                <p class="text2">{{sb_mttr}}<small>h</small></p>
              </div>
            </div>
            <div class="sbxj_tb zw" ref="sbxjChar" style="height: 21.6vh"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div style="height: calc(60% - 12px);margin-bottom: 12px">
          <img src="../img/p2.png" style="opacity: 0.7;width: 70%;display: block;margin: 0 auto">
        </div>
        <div class="card" style="height: calc(40% - 12px);">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span @click="openZNAF">智能安防</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="znaf_tb">
              <div class="zw" style="height: 100%;width: 60%;margin-right: 12px" ref="znafZzChar"></div>

              <div style="height: 100%;width: 40%;position: relative">
                <div class="zw" style="height: 100%;width: 100%;" ref="znafBzChar"> </div>
                <div style="position: absolute;right: 1px;top: 1px">
                    <a-month-picker style="width: 100px"  format="YYYY/MM" :default-value="nowMonth" @change="monthChange"/>
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="card height_50">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span @click="openNH">用电统计(kw)</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="ydtj">
              <div class="flex-0">
                <img class="icon1" src="../img/icon4.svg">
              </div>
              <div class="w-100">
                <div class="item">
                  <img src="../img/p1.svg">
                  <div class="info">
                    <div class="w-100 text1">近1天</div>
                    <div class="flex-0 text2" style="color: #1BFFF0">{{ydtj_1day}}</div>
                    <div class="flex-0 text3">kW.h</div>
                  </div>
                </div>
                <div class="item">
                  <img src="../img/p1.svg">
                  <div class="info">
                    <div class="w-100 text1">近1月</div>
                    <div class="flex-0 text2" style="color: #629EFF">{{ydtj_1month}}</div>
                    <div class="flex-0 text3">kW.h</div>
                  </div>
                </div>
                <div class="item">
                  <img src="../img/p1.svg">
                  <div class="info">
                    <div class="w-100 text1">近1年</div>
                    <div class="flex-0 text2" style="color: #FF9F1B">{{ydtj_1year}}</div>
                    <div class="flex-0 text3">kW.h</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="ydtj_tb zw" ref="dhChar"></div>
          </div>
        </div>

        <div class="card height_50">
          <div class="title">
            <img class="icon1" src="../img/icon1.svg">
            <span @click="openXNZB">设备绩效</span>
            <img class="icon2" src="../img/icon2.svg">
          </div>
          <div class="body">
            <div class="sbjx">
              <div class="item">
                <div id="main1"  ref="sbjxDayHChar"></div>
                <p style="color: #A2F940">近1日(OEE)</p>
              </div>
              <div class="item">
                <div id="main2" ref="sbjxMonthHChar"></div>
                <p style="color: #4DA3FE">近1月(OEE)</p>
              </div>
              <div class="item">
                <div id="main3" ref="sbjxYearHChar"></div>
                <p style="color: #F93737">近1年(OEE)</p>
              </div>
            </div>
            <div class="sbjx_tb zw" ref="sbjxZzChar"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <img src="../img/footer.svg">
    </div>
  </div>
</template>

<script>
import {initTheme} from '@/components/SettingDrawer/settingConfig'
import defaultSettings from '@/config/defaultSettings'
import {SysMixin} from '@/mixins/SysMixin'
import * as echarts from 'echarts'
import Big from 'big.js'
import moment from 'moment';
import constant from '@/views/kzzx/utils/constant'
import {
  iss_event_stat_window,
  mes_dongqing_summary,
  iss_event_stat_type,
  ems_electric_summary,
  ems_electric_history,
  dpm_oee, mes_dongqing_history,plant_state_stat,dpm_oee_trend,dpm_mtbf,data_alarm_trend
} from '@/views/kzzx/utils/api'
import {
  getNowDaySTTime,
  getNowMonthSTTime,
  getNowYearSTTime,
  getMonthStartEnd,
  getMonthAgoToNowSTTime,
  getDecimalPlaces,
  getDaysAgo,
  getMonthAgo,
  formatDateTime, formatMonth, formatDate, getDaysLater
} from '@/views/kzzx/utils/util'

export default {
  name: 'test',
  components: {},
  mixins:[SysMixin],
  beforeCreate () {

  },

  beforeDestroy () {
    if(this.timmer){
      console.log("清除定时器")
      clearTimeout(this.timmer)
    }
  },

  data () {
    return {
      visible:false,
      char:null,
      moment,
      //生产概况-日产
      scgk_rc: '--',

      //生产概况-月产
      scgk_yc:'--',

      //生产概况-年产
      scgk_nc:'--',

      //生产概况-良品率
      scgk_lpl:'--',

      //图表
      scgkChar: null,

      //设备巡检
      sbxjChar: null,

      //智能安防柱状图
      znafZzChar: null,

      //智能安防饼状图
      znafBzChar: null,

      //设备绩效环形图，近一日
      sbjxDayHChar: null,

      //设备绩效环形图 近一月
      sbjxMonthHChar: null,

      //设备绩效环形图 近一年
      sbjxYearHChar: null,

      //电耗折线图
      dhChar: null,

      //设备绩效柱状图
      sbjxZzChar: null,

      //用电统计近1天
      ydtj_1day:0,

      //用电统计近1月
      ydtj_1month:0,

      //用电统计近1年
      ydtj_1year:0,

      //近1日OEE
      oee_1day:0,
      //近1月OEE
      oee_1month:0,
      //近1年OEE
      oee_1year:0,

      //设备总数
      sb_total:0,
      //设备运行数
      sb_run:0,
      //设备报警数
      sb_alarm:0,
      //设备故障数
      sb_falut:0,

      //设备运行百分比
      sb_run_p:0,
      //设备报警百分比
      sb_alarm_p:0,
      //设备故障百分比
      sb_falut_p:0,

      //设备平均故障间隔 天
      sb_mtbf:0,

      //设备平均故障恢复时间 小时
      sb_mttr:0,

      //定时器
      timmer:null,

      //间隔
      interval:1000*60*10

    }
  },
  // 监听属性
  computed: {
    nowMonth(){
      return moment()
    }
  },
  created () {},
  mounted () {
    document.title = "控制中心大屏"
    let that = this
    this.initTheme()
    that.$nextTick(() => {
      that.initChar()
      //查询数据
      that.query()
    })
  },
  destroy () {

  },
  methods: {
    initTheme(){
      let theme = localStorage.getItem(defaultSettings.localStorageThemeKey)
      initTheme(theme || defaultSettings.primaryTheme)
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {

      this.visible = false;

    },
    handleCancel(e) {
      this.visible = false;
    },

    query(){
      //生产概况-日产
      this.queryScgkRc()

      //获取生产概况月产数据
      this.queryscgkYc()

      //获取年产概况数据
      this.queryscgkNc()

      //获取近1年12个月，每个月的生产概况数据
      this.queryScgkCharData()

      //获取智能安防柱状图数据
      this.queryZnafZzCharData()

      //获取智能安防饼状图数据
      this.queryZnafBzCharData(moment().format('YYYY-MM'))

      //获取用电统计数据
      this.queryYdtj()

      //获取最近1年，每月的用电
      this.queryYdMonth()

      //获取最近1天OEE数据
      this.queryOee1Day()

      //获取近1月的OEE数据
      this.queryOee1Month()

      //获取近1年的OEE数据
      this.queryOee1Year()

      //OEE 趋势
      this.queryOeeTrend()

      //查询所有设备状态
      this.queryAllState()

      //查询mtbf mttr
      this.queryMTBF()

      //报警趋势
      this.queryAlarmTrend()

      if(this.timmer){
        clearTimeout(this.timmer)
      }
      this.timmer = setTimeout(() => {
        this.query()
      }, this.interval)
    },
    initChar () {
      this.scgkChar = echarts.init(this.$refs.scgkChar)
      this.sbxjChar = echarts.init(this.$refs.sbxjChar)
      this.znafZzChar = echarts.init(this.$refs.znafZzChar)
      this.znafBzChar = echarts.init(this.$refs.znafBzChar)
      this.sbjxYearHChar = echarts.init(this.$refs.sbjxYearHChar)
      this.sbjxDayHChar = echarts.init(this.$refs.sbjxDayHChar)
      this.sbjxMonthHChar = echarts.init(this.$refs.sbjxMonthHChar)
      this.dhChar = echarts.init(this.$refs.dhChar)
      this.sbjxZzChar = echarts.init(this.$refs.sbjxZzChar)
    },
    monthChange(d){
      // console.log(d.format('YYYY-MM'))
      this.queryZnafBzCharData(d.format('YYYY-MM'))
    },
    /**
     * 获取生产概况日产数据
     */
    queryScgkRc(){
      //获取当前日期的开始和截止时间
      let day = getNowDaySTTime()
      mes_dongqing_summary(day.start,day.end).then(res=>{
        console.log("/api/mes/dongqing/summary,生产概况日产吨:",res)
        if(constant.successCode===res.code){
          if(res.data.weight_output){
            this.scgk_rc = Big(res.data.weight_output).toFixed(0)
          }else{
            this.scgk_rc = '--'
          }
        }
      })
    },
    /**
     * 获取生产概况月产数据
     */
    queryscgkYc(){
      let month = getNowMonthSTTime()
      mes_dongqing_summary(month.start,month.end).then(res=>{
        console.log("/api/mes/dongqing/summary,生产概况月产吨:",res)
        if(constant.successCode===res.code){
          if(res.data.weight_output){
            this.scgk_yc = Big(res.data.weight_output).toFixed(0)
            //这里计算月成品率
            this.scgk_lpl = (Big(res.data.weight_output).div(res.data.weight_input).toFixed(2))*100
          }else{
            this.scgk_yc =  '--'
            this.scgk_lpl = '--'
          }


        }
      })
    },
    /**
     * 获取生产概况年产数据
     */
    queryscgkNc(){
      let year = getNowYearSTTime()
      mes_dongqing_summary(year.start,year.end).then(res=>{
        console.log("/api/mes/dongqing/summary,生产概况年产吨:",res)
        if(constant.successCode===res.code){
          if(res.data.weight_output){
            this.scgk_nc = Big(res.data.weight_output).toFixed(0)
          }else{
            this.scgk_nc = '--'
          }

        }
      })
    },

    /**
     * 近一年，每月的生产概况
     */
    queryScgkCharData(){
      let month = getMonthAgo(11)
      mes_dongqing_history(month+"-01 00:00:00",formatDateTime(new Date()),constant.win_group,constant.winUnit_mo).then(res=>{
        console.log("/api/mes/dongqing/history,生产概况柱状折线图:",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let xAxisData = []
          let clDun=[]//产量吨
          let tlDun=[]//投料吨
          let tlKuai=[]//投料块
          let lpKuai =[]//落片块
          for(const item of source){
            xAxisData.push(item[0])
            clDun.push(item[1])
            tlDun.push(item[3])
            tlKuai.push(item[4])
            lpKuai.push(item[5])
          }
          this.setScgkChar(xAxisData,clDun,tlDun,tlKuai,lpKuai)
        }
      })
    },

    /**
     * 获取所有设备状态
     */
    queryAllState(){
      plant_state_stat(constant.notGroupByRegion).then(res=>{
        console.log("/api/plant/state/stat,设备巡检，设备在线报警等数量:",res)
        if(constant.successCode===res.code){
          this.sb_total = res.data.total
          this.sb_run = res.data.run
          this.sb_alarm = res.data.alarm
          this.sb_falut = res.data.fault

          this.sb_run_p = Big(Big(this.sb_run).div(Big(this.sb_total)).toFixed(2)).times(Big(100))
          this.sb_alarm_p = Big(Big(this.sb_alarm).div(Big(this.sb_total)).toFixed(2)).times(Big(100))
          this.sb_falut_p = Big(Big(this.sb_falut).div(Big(this.sb_total)).toFixed(2)).times(Big(100))
        }
      })
    },

    /**
     * 获取智能安防柱状图数据
     */
    queryZnafZzCharData(){
      let month = getMonthAgo(11)
      iss_event_stat_window(month+"-01",formatDate(new Date()),constant.win_group,constant.winUnit_mo).then(res=>{
        console.log("/api/iss/event/stat/window,智能安防左侧柱状图:",res)
        if(constant.successCode===res.code){
          let source = res.data.dataset.source
          let xAxisData = []
          let seriesData = []
          for (const item of source) {
            xAxisData.push(item[0])
            seriesData.push((Big(item[1]).plus(Big(item[2])).plus(Big(item[3]))).toString())
          }


          this.setZnafZzChar (xAxisData,seriesData)
        }
      })
    },

    /**
     * 获取智能安防饼图数据
     */
    queryZnafBzCharData(month){
      //获取月份对应的起止时间
      let m = getMonthStartEnd(month)
      iss_event_stat_type(m.start,m.end).then(res=>{
        console.log("/api/iss/event/stat/type,智能安防右侧饼状图:",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let data=[]
          for(const item of source){
            data.push({value:item[1],name:item[0]})
          }
          this.setZnafBzChar(data)
        }
      })
    },

    /**
     * 查询用电统计
     */
    queryYdtj(){
      ems_electric_summary().then(res=>{
        console.log("/api/ems/electric/summary，用电统计查询结果",res)
        if(constant.successCode===res.code){
          let data = res.data
          this.ydtj_1day=data.pastDay
          this.ydtj_1month = data.pastMonth
          this.ydtj_1year = data.pastYear
        }
      })
    },

    /**
     * 查询最近12个月，每个月用电
     */
    queryYdMonth(){
      let m = getMonthAgo(11)
      ems_electric_history(m+"-01 00:00:00",formatDateTime(new Date()),constant.win_group,constant.winUnit_mo).then(res=>{
        console.log("/api/ems/electric/history，查询近12个月每月用电统计",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let xAxisData = []
          let seriesData = []
          for(const item of source){
            xAxisData.push(formatMonth(new Date(item[0])))
            seriesData.push(item[1])
          }
          this.setDhChar(xAxisData,seriesData)
        }
      })
    },
    /**
     * 设备绩效，近1日的OEE
     */
    queryOee1Day(){
      let day = getDaysAgo(1)
      dpm_oee(day,formatDate(new Date())).then(res=>{
        console.log("/api/dpm/oee，设备绩效近1日OEE",res)
        if(constant.successCode===res.code){
          this.oee_1day = res.data.OEE
          this.setSbjxDayHChar()
        }
      })
    },

    /**
     * 设备绩效，近1月的OEE
     */
    queryOee1Month(){
      let month = getMonthAgo(1)
      dpm_oee(month+'-01',formatDate(new Date())).then(res=>{
        console.log("/api/dpm/oee，设备绩效近1月OEE",res)
        if(constant.successCode===res.code){
          this.oee_1month = res.data.OEE
          this.setSbjxMonthHChar()
        }
      })
    },

    /**
     * 设备绩效，近1年的OEE
     */
    queryOee1Year(){
      let month = getMonthAgo(11)
      dpm_oee(month+'-01',formatDate(new Date())).then(res=>{
        console.log("/api/dpm/oee，设备绩效近1年OEE",res)
        if(constant.successCode===res.code){
          this.oee_1year = res.data.OEE
          this.setSbjxYearHChar()
        }
      })
    },

    /**
     * 查询OEE趋势
     */
    queryOeeTrend(){
      let m = getMonthAgo(11)
      dpm_oee_trend(m+"-01",formatDate(new Date())).then(res=>{
        console.log("/api/dpm/oee/trend，OEE趋势",res)
        if(constant.successCode===res.code){
          let source = res.data.source
          let xAxisData=[],oeeData=[],teepData=[]
          for(const item of source){
            xAxisData.push(item[0])
            oeeData.push(Big(item[5]).toFixed(2))
            teepData.push(Big(item[6]).toFixed(2))
          }
          this.setSbjxZzChar(xAxisData,oeeData,teepData)
        }
      })
    },

    /**
     * 查询设备MTBF,MTTR
     */
    queryMTBF(){
      let m = getMonthAgo(11)
      dpm_mtbf(m+"-01",formatDate(new Date())).then(res=>{
        console.log("/api/dpm/mtbf，MTBF,MTTR",res)
        if(constant.successCode===res.code){
          this.sb_mtbf = res.data.MTBF
          this.sb_mttr = res.data.MTTR
        }
      })
    },

    /**
     * 报警趋势
     */
    queryAlarmTrend(){
      let m = getMonthAgo(11)
      data_alarm_trend(m+"-01",getDaysLater(1),constant.win_group,constant.winUnit_mo).then(res=>{
        console.log("/api/data/alarm/trend，设备巡检，报警趋势",res)
        if(constant.successCode===res.code){
          let source = res.data.dataset.source
          let xAxisData = []
          let seriesData = []
          for(let item of source){
            xAxisData.push(item[0])
            seriesData.push(item[1])

          }

          this.setSbxjChar(xAxisData,seriesData)
        }
      })
    },

    //生产概况CHAR
    setScgkChar (xAxisData,clDun,tlDun,tlKuai,lpKuai) {

      let option = {
        grid:{
          left:'18%',
          bottom:'13%',
          right:'13%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['产量(吨)', '投料(吨)', '投料(块)', '落片量(片)'],
          textStyle: { color: '#ffffff' }
        },
        xAxis: [
          {
            type: 'category',
            data:xAxisData,
            axisPointer: { type: 'shadow' },
            axisLine: { lineStyle: { color: '#ffffff' } }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { formatter: '{value} 吨' },
            axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
            splitLine: {
              lineStyle: {
                color: '#318BAB', // 设置线的颜色为蓝色
                width: 2,         // 设置线的宽度
                type: 'dashed'     // 设置线的类型为实线
              }
            }
          },
          {
            axisLine: {
              show: false, lineStyle: { color: '#ffffff' }
            },
            splitLine: {
              show: false
            }
          }
        ],
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,        // 初始显示的部分（0% 到 50%）
          bottom:0
        }],
        series: [
          {
            name: '产量(吨)',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 吨'
              }
            },
            data: clDun
          },
          {
            name: '投料(吨)',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 吨'
              }
            },
            data: tlDun
          },
          {
            name: '投料(块)',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 块'
              }
            },
            data:tlKuai
          },
          {
            name: '落片量(片)',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 片'
              }
            },
            data: lpKuai
          }
        ]
      }
      this.scgkChar.setOption(option)
    },

    //设置设备巡检char
    setSbxjChar (xAxisData,seriesData) {
      let option = {
        grid:{
          top:'12%',
          bottom:'12%',
          left:'13%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }

          }
        },
        legend: {
            data: ['报警趋势'],
            textStyle: {color: '#ffffff',}
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: { type: 'shadow' },
            axisLine: { lineStyle: { color: '#ffffff' } }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { formatter: '{value}' },
            axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
            splitLine: {
              lineStyle: {
                color: '#318BAB', // 设置线的颜色为蓝色
                width: 0.5,         // 设置线的宽度
                type: 'dashed'     // 设置线的类型为实线
              }
            }
          }
        ],
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,        // 初始显示的部分（0% 到 50%）
          bottom:0
        }],
        series: [
          {
            name: '报警趋势',
            type: 'line',
            areaStyle: { color: '#318BAB' },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#00F6FF' // 起始颜色
                }, {
                  offset: 1, color: '#00F6FF' // 结束颜色
                }])
              }
            },
            data:seriesData
          }
        ]
      }
      this.sbxjChar.setOption(option)
    },
    //智能安防柱状图
    setZnafZzChar (xAxisData,seriesData) {
      let option = {
        grid:{
          bottom:'12%',
          top:'12%',
          left:'12%',
          right:0,
        },
        legend: {
            data: ['次数'],
            textStyle: {color: '#ffffff',}
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }

          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisPointer: { type: 'shadow' },
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        yAxis: {
          type: 'value',
          axisLabel: { formatter: '{value}' },
          axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
          splitLine: {
            lineStyle: {
              color: '#318BAB', // 设置线的颜色为蓝色
              width: 2,         // 设置线的宽度
              type: 'dashed'     // 设置线的类型为实线
            }
          }
        },
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,        // 初始显示的部分（0% 到 50%）
          bottom:0
        },],
        series: [
          {
            name:'次数',
            data: seriesData,
            type: 'bar',
            itemStyle: { color: '#752AEE' }
          }
        ]
      }

      this.znafZzChar.setOption(option)
    },

    //智能安防饼状图
    setZnafBzChar (data) {
      let option = {
        grid:{
          top:'12%',
          bottom:'12%',

        },
        legend: {
          top: '30%',
          orient: 'vertical',  // 控制图例的布局方向为垂直
          left: 'right',
          textStyle: { color: '#ffffff' },
          formatter: function (name) {
            let total = 0;
            option.series[0].data.forEach(function (item) {
              if (item.name === name) {
                total = item.value;
              }
            });
            return `${name}: ${total}`; // 使用模板字符串来格式化文本
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {

            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data,
            center: ['30%', '50%']
          }
        ]
      }
      this.znafBzChar.setOption(option)
    },

    //设备绩效环形图，近一年
    setSbjxYearHChar () {
      let oee = Big(this.oee_1year).times(Big(100))
      let n = getDecimalPlaces(oee)
      if(n>=2){
        oee = Big(this.oee_1year).times(Big(100)).toFixed(2)
      }
      let option = {
        title: [
          {
            text: oee+'%',//百分比
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '20',
              color: '#F5AE1D'

            }
          }
        ],
        polar: {
          radius: ['42%', '52%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },

        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)'
            },
            data: [oee.toString()],//值
            coordinateSystem: 'polar',
            itemStyle: {
              normal: { color: '#F5AE1D' }
            }

          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['56%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          }
        ]
      }
      this.sbjxYearHChar.setOption(option)
    },

    //设备绩效环形图，近一日
    setSbjxDayHChar () {

      let oee = Big(this.oee_1day).times(Big(100))
      let n = getDecimalPlaces(oee)
      if(n>=2){
        oee = Big(this.oee_1day).times(Big(100)).toFixed(2)
      }

      let option = {
        title: [
          {
            text: oee+'%',//百分比
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '20',
              color: '#00CCFF'

            }
          }
        ],
        polar: {
          radius: ['42%', '52%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)'
            },
            data: [oee.toString()],//值
            coordinateSystem: 'polar',
            itemStyle: {
              normal: { color: '#00CCFF' }
            }

          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['56%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          }
        ]
      }
      this.sbjxDayHChar.setOption(option)
    },

    //设备绩效环形图，近一日
    setSbjxMonthHChar () {

      let oee = Big(this.oee_1month).times(Big(100))
      let n = getDecimalPlaces(oee)
      if(n>=2){
        oee = Big(this.oee_1month).times(Big(100)).toFixed(2)
      }
      let option = {
        title: [
          {
            text: oee+'%',//百分比
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '20',
              color: '#006EEB'

            }
          }
        ],
        polar: {
          radius: ['42%', '52%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(66, 66, 66, .3)'
            },
            data: [oee.toString()],//值
            coordinateSystem: 'polar',
            itemStyle: {
              normal: { color: '#006EEB' }
            }

          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['56%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)'

            },
            data: [100]
          }
        ]
      }
      this.sbjxMonthHChar.setOption(option)
    },

    //最近12个月用电
    setDhChar (xAxisData,seriesData) {
      let option = {
        grid: {
          bottom: '12%',
          top:'10px',
          left:'18%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisPointer: { type: 'shadow' },
          axisLine: { lineStyle: { color: '#ffffff' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#ffffff' } },
          splitLine: {
            lineStyle: {
              color: '#318BAB', // 设置线的颜色为蓝色
              width: 2,         // 设置线的宽度
              type: 'dashed'     // 设置线的类型为实线
            }
          }
        },
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,
          bottom:0
        },],
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      }
      this.dhChar.setOption(option)
    },

    //OEE趋势
    setSbjxZzChar (xAxisData,oeeData,teepData) {
      let option = {
        grid: {
          top: '-10px',
          bottom:'12%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },

        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: { lineStyle: { color: '#ffffff' } }

          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            },
            axisLine: { lineStyle: { color: '#ffffff', width: 1, type: 'dashed' } },
            splitLine: {
              lineStyle: {
                color: '#318BAB', // 设置线的颜色为蓝色
                width: 2,         // 设置线的宽度
                type: 'dashed'     // 设置线的类型为实线
              }
            }
          }

        ],
        dataZoom: [{
          height:10,
          type: 'slider', // 内部滚动条
          start: 0,       // 初始滚动位置
          end: 100,         // 初始显示的部分（0% 到 50%）
          show:true,
          bottom:0
        }],
        series: [
          {
            name: 'OEE',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %'
              }
            },
            data: oeeData
          },
          // {
          //   name: 'TEEP',
          //   type: 'bar',
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' %'
          //     }
          //   },
          //   data: teepData
          // }

        ]
      }
      this.sbjxZzChar.setOption(option)
    },

    /**
     * 打开生产概况
     */
    openSCGK(){
      this.$router.push('/sc')
      // let url =constant.baseUrl+'/sc'
      // window.location.href = url
      // let winName = window.open(url, "scgk");
      // if (winName) {
      //   winName.location.href = url;
      // } else {
      //   window.open(url, name);
      // }
    },
    openZNAF(){
      this.$router.push('/zhaf')
      // let url =constant.baseUrl+'/zhaf'
      // window.location.href = url
      // let winName = window.open(url, "zhaf");
      // if (winName) {
      //   winName.location.href = url;
      // } else {
      //   window.open(url, name);
      // }
    },
    openNH(){
      this.$router.push('/nh')
      // let url =constant.baseUrl+'/nh'
      // window.location.href = url
      // let winName = window.open(url, "nh");
      // if (winName) {
      //   winName.location.href = url;
      // } else {
      //   window.open(url, name);
      // }
    },
    openXNZB(){
      this.$router.push('/xnzb')
      // let url =constant.baseUrl+'/xnzb'
      // window.location.href = url
      // let winName = window.open(url, "xnzb");
      // if (winName) {
      //   winName.location.href = url;
      // } else {
      //   window.open(url, name);
      // }
    },
    openSBXJ(){
      this.$router.push('/xj')
      // let url =constant.baseUrl+'/xj'
      // window.location.href = url
      // let winName = window.open(url, "xj");
      // if (winName) {
      //   winName.location.href = url;
      // } else {
      //   window.open(url, name);
      // }
    }


  }

}
</script>

<style lang="less" scoped>

body {
  font-family: 'myriad-pro', 'Arial' !important;
  margin: 0;
  padding: 0;
}

.w-100 {
  width: 100%;
}

.flex {
  display: flex;
}

.flex-0 {
  flex: 0 0 auto;
}

.flex_c_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  margin: auto;
  max-width: 68.750vw;
}

ul, li, p {
  margin: 0;
  padding: 0;
  list-style: none;
}


.header {
  position: relative;
  box-sizing: content-box;
  height: 6.875vw;
  > img {
    width: 100%;
  }

  .box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;

    .title {
      font-size: 2.188vw;
      font-weight: bold;
      text-align: center;
      margin-top: 2.240vw;
      text-shadow: 0 0.208vw 0.208vw rgba(0,0,0,0.25);
      background: linear-gradient(180deg, #FFFFFF 0%, #83C3EF 83%, #0184DE 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

  }
}


.bg {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 0.729vw;
  line-height: 1;
  background-image: url('../img/bg.png');
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  color: #fff;

}


.dp_con {
  position: relative;
  //background-image: url("../img/line2.svg");
  background-size: 97.6%;
  height: calc(100vh - 6.354vw);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 0 0.833vw;
  display: flex;
  margin-top: -2.083vw;


  .left {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .right {
    width: 26.302vw;
    flex: 0 0 auto;
  }

  .center {
    width: 100%;
    padding: 0 0.833vw;
  }
}

.card {
  margin-bottom: 0.625vw;
  text-align: left;
  background: rgba(10, 63, 152, 0.2);
  position: relative;
  padding: 0.417vw;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    background-size: 100%;
    background-position: bottom;
    padding-bottom: 0.521vw;
    font-size: 0.938vw;
    font-weight: bold;
    margin-bottom: 0.313vw;
    background-repeat: no-repeat;
    text-shadow: 0 0 0.521vw #00b6ff;
    position: relative;
    cursor: pointer;
    &::before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 3.385vw;
      height: 0.156vw;
      background: #0086FF;
    }
    &::after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 3.646vw;
      right: 2.604vw;
      height: 0.156vw;
      background: #083566;
    }

    .icon1 {
      margin-right: 0.625vw;
      width: 0.781vw;
    }
    .icon2{
      position: absolute;
      width: 2.500vw;
      bottom: 0;
      right: 0;
    }
  }

  .body {
    position: relative;
    padding: 0.417vw;
    box-sizing: border-box;
    height: calc(100% - 2.396vw);

    > .img {
      position: absolute;
      width: 0.521vw;
      &.t1 {
        left: 0;
        top: 0;
      }

      &.t2 {
        right: 0;
        top: 0;
        transform: rotate(90deg);
      }

      &.t3 {
        left: 0;
        bottom: 0;
        transform: rotate(270deg);
      }

      &.t4 {
        right: 0;
        bottom: 0;
        transform: rotate(180deg);
      }
    }

  }
}

.height_50 {
  height: calc(50% - 0.625vw)
}

.height_3 {
  height: calc(33.33% - 0.625vw)
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 0.313vw; /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #1d83bb; /* 滑块背景色 */
  border-radius: 0.313vw;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块悬停时的背景色 */
}


.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  img{
    display: block;
    margin: auto;
    width: 70.729vw;
  }
}

.sckg {
  display: flex;
  justify-content: space-between;
  .item{
    width: 4.688vw;
    text-align: center;
    img{
      width: 100%;
      display: block;
    }
    .text1{
      position: relative;
      top: -2.604vw;
      font-weight: bold;
      font-size: 1.458vw;
      color: #FFFFFF;
      line-height: 1;
      background: linear-gradient(180deg, #FFFFFF 0%, #55D0FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-top: -0.781vw;
    }
    .text2{
      font-size: 0.625vw;
    }
  }
}
.sckg_tb{
  height: calc(100% - 6.458vw);
  margin-top: 0.625vw;
}

.sbxj{
  display: flex;
  justify-content: space-between;
  .item {
    flex: 1;
    text-align: center;
    img{
      width: 3.646vw;
    }
    .text1{
      font-size: 0.573vw;
      margin: 0.521vw 0;
    }
    .text2{
      font-size: 1.042vw;
      small{
        font-size: 0.677vw;
      }
    }
  }
}

.sbxj_tb {
  height: calc(100% - 7.813vw);
  margin-top: 0.625vw;
}


.znaf_tb{
  display: flex;
  height: 100%;
}

.ydtj{
  display: flex;
  .icon1{
    width: 5.729vw;
    margin: 1.042vw 1.302vw 0 0.625vw;
  }
  .item{
    position: relative;
    font-size: 0.729vw;
    margin-bottom: 0.625vw;
    img{
      width: 100%;
      display: block;
    }
    .text1{
    }
    .text2{
      font-size: 1.250vw;
      font-weight: bold;
      position: relative;
      top: -0.052vw;
    }
    .text3{
      margin-left: 0.625vw;
    }
    .info{
      position: absolute;
      left: 1.354vw;
      right: 0.729vw;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
    }
  }
}

.ydtj_tb{
  height: calc(100% - 8.125vw);
}

.sbjx{
  display: flex;
  justify-content: space-around;
  .item{
    text-align: center;
    flex: 1;
    div{
      height: 5.208vw;
    }
    p{
      margin-top: 0.625vw;
    }
  }
}


.sbjx_tb{
  height: calc(100% - 7.292vw);
  margin-top: 0.625vw;

}

.zw{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.sblyl{
  height: 100%;
}


.sbxj_tb {
  height: calc(100% - 165px);
  margin-top: 0.625vw;
}


.xnzb_c{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .r1{
    width: 410px;
    .line{
      height: 3px;
      background: rgba(255, 255, 255, 0.28);
      display: flex;
      justify-content: space-between;
      align-items: center;
      &::before,&::after{
        content: "";
        width: 22px;
        height: 3px;
        background: #FED9A6;
        box-shadow: 0 0 6px 0 #FED9A6;
      }
    }
    .box{
      margin: 8px 0;
      background: #0B2248;
      border: 1px solid #2F6EDD;
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
}

::v-deep .ant-input {
  background-color: #1C3457 !important;
  border-color: #1C3457 !important;
  color: #ffffff !important;
}
::v-deep .anticon.anticon-calendar.ant-calendar-picker-icon {
  color: #ffffff !important;
}

</style>




